import React, { FC, useCallback, useEffect, useState, useMemo } from "react";
import '../Marketing/marketing.less'
import { Select, Input, Button, Space, Switch, Modal, Radio, Pagination, message } from 'antd';
import { connect } from 'react-redux';
import action from '../../store/Actions/index';
import Table from '../../component/table'

// import Pkalert from '../../component/pkalert'
import './Educational.less'
import {
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
} from '@ant-design/icons';
const { Option } = Select;


interface Props {
  datalist: Array<any>,
  administratorReducer?: any,
  getjwlist: any,
  getscblist: any,
  getkclist: any,
  kclist?: any,
  setclass: any,

}


const Educational = (props: Props) => {
  const [qwstage, setqwstage] = useState('')
  const [stage, setstage] = useState('')
  const [scb, setscb] = useState('')

  const [loading, setcloading] = useState(false)
  const [visible, setvisible] = useState(false)
  const [pkobj, setpkobj] = useState({ name: "", class: '', id: "", scb: "", xsphone: '', sex: '',shuse:'',banji:'' })
  const [value, setvalue] = useState('')
  const [alertflag, setalertflag] = useState(0)
  const [page, setpage] = useState(5)
  const [pageIndex, setpageIndex] = useState(1)
  const [val1, setval1] = useState('')
  const [val2, setval2] = useState('')
  const [banji, setbanji] = useState('')
  const [shuse, setshuse] = useState('')
  // const [val3, setval3] = useState('')
  // const [val4, setval4] = useState('')
  function showTotal(total) {
    return `Total ${total} items`;
  }
  function showModal() {
    this.setState({
      visible: true,
    });
  };

  function handleOk() {
    if (alertflag == 0) {
      setcloading(true)
      setTimeout(async () => {
        setvisible(false)
        setcloading(false)
        await props.setclass({ id: pkobj.id, val: props.administratorReducer.kclist[value],banji,shuse })
        // await props.getscblist({ page: page, pageIndex: pageIndex })
        await props.getscblist({ page: page, pageIndex: pageIndex, val1, val2, val3: scb, val4: stage })

      }, 3000);
    } else if (alertflag == 1) {

      setvisible(false)



    }

  };
  function onChange(e) {

  }
  function handleCancel() {
    // this.setState({ visible: false });
    setvisible(false)
  };
  const columns = [
    {
      title: '学号',
      width: 150,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
    },
    {
      title: '姓名',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '身份证',
      dataIndex: 'cid',
      key: 'cid',
      width: 150,
    },
    {
      title: '电话',
      dataIndex: 'xsphone',
      key: 'xsphone',
      width: 150,
    },
    {
      title: '市场部',
      dataIndex: 'scb',
      key: 'scb',
      width: 150,
    },
    {
      title: '缴费情况',
      dataIndex: 'jfqk',
      key: 'jfqk',
      width: 150,
    },

    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (text, record: any) => (
        <Space size="middle">
          {
            record.class=='null'?<EditTwoTone onClick={async () => {
              setvisible(true)
              setpkobj(record)
              setalertflag(0)
              await props.getkclist(record.qwstage)
  
  
            }} />:<span onClick={async () => {
              setvisible(true)
              setpkobj(record)
              setalertflag(0)
              await props.getkclist(record.qwstage)
  
  
            }}>{record.class}</span>
          }
     

          <SnippetsTwoTone onClick={() => {
            setpkobj(record)
            setvisible(true)
            setalertflag(1)
          }} />
        </Space>
      )
    },
  ];

  useEffect(() => {
    props.getscblist({ page: page, pageIndex: pageIndex })




  }, [])
  return (


    <div className="Marketing">
      {
        alertflag == 0 ? <Modal
          visible={visible}
          title={pkobj.name}
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>
              关闭
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          {/* <div className="divs3">
          <div className="divs"><b>*</b><span>班级</span> <Select placeholder='请选择' style={{ width: 100 }} onChange={async (e) => {
            setbanji(e)
        
          }}>
            <Option value="2102A">2102A</Option>
            <Option value="2103A">2103A</Option>
            <Option value="2104A">2104A</Option>
            <Option value="2105A">2105A</Option>
          </Select></div>
          <div className="divs"><b>*</b><span>宿舍</span> <Select placeholder='请选择' style={{ width: 100 }} onChange={async (e) => {
             setshuse(e)
            
           
          }}>
            <Option value="201">201</Option>
            <Option value="203">203</Option>
            <Option value="204">204</Option>
            <Option value="205">205</Option>
          </Select></div>
          </div> */}
          

          <div className="pklist">


            <div>
              <Radio.Group onChange={onChange} value={value}>

                {
                  props.administratorReducer.kclist.map((item, index) => {
                    return <Radio value={index} key={index} className='radios' onChange={() => {
                      setvalue(index)
                    }}>{item}</Radio>
                  })
                }

              </Radio.Group>
            </div>
          </div>
        </Modal> : null
      }
      {
        alertflag == 1 ? <Modal
          visible={visible}
          title='基本资料'
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          <div>
            <p>姓名:{pkobj.name}</p>
            <p>性别:{pkobj.sex}</p>
            <p>市场部:{pkobj.scb}</p>
            <p>手机号:{pkobj.xsphone}</p>
            {/* <p className={pkobj.shuse != 'null' ? 'p1' : 'p2'}>宿舍:{pkobj.shuse != 'null' ? pkobj.shuse : '没安排宿舍'}</p>
            <p className={pkobj.banji != 'null' ? 'p1' : 'p2'}>班级:{pkobj.banji != 'null' ? pkobj.banji : '没安排班级'}</p> */}
            <p className={pkobj.class != 'null' ? 'p1' : 'p2'}>课程:{pkobj.class != 'null' ? pkobj.class : '没安排课程'}</p>

          </div>
        </Modal> : null
      }

      <div className="Marketings">
        <div className="inps">

          <div className="divs"><b>*</b><span className="span">学生姓名</span><Input placeholder="请输入" value={val1} onChange={async (e) => {

            await setval1(e.target.value)
            await setpageIndex(1)
            await props.getscblist({ page: page, pageIndex: pageIndex, val1: e.target.value, val2, val3: scb, val4: stage })

          }} /></div>
          <div className="divs"><b>*</b><span>学院</span> <Select placeholder='请选择' style={{ width: 200 }} onChange={async (e) => {
            await setval2(e)
            await setpageIndex(1)
            await props.getscblist({ page: page, pageIndex: pageIndex, val1, val2: e, val3: scb, val4: stage })

          }}>
            {
              props.administratorReducer.scbcollegelist.map((item, index) => {
                return <Option value={item.college} key={index}>{item.college}</Option>
              })
            }

          </Select></div>
          <div className="divs"><b>*</b><span>市场部</span> <Select placeholder='请选择' style={{ width: 100 }} onChange={async (e) => {
            setscb(e)

            setpageIndex(1)
            await props.getscblist({ page: page, pageIndex: pageIndex, val1, val2, val3: e, val4: stage })
          }}>
            <Option value="中原">中原</Option>
            <Option value="保仓">保仓</Option>
            <Option value="黑吉">黑吉</Option>
            <Option value="燕泽">燕泽</Option>
          </Select></div>
          <div className="divs"><b>*</b><span>学生类型</span> <Select placeholder='请选择' style={{ width: 200 }} onChange={async (e) => {
            setstage(e)
            setpageIndex(1)


            await props.getscblist({ page: page, pageIndex: pageIndex, val1, val2, val3: scb, val4: e })
          }} >
            <Option value="中职">中职</Option>
            <Option value="高职">高职</Option>
            <Option value="专基">专基</Option>
            <Option value="专业">专业</Option>
            <Option value="专高">专高</Option>
            <Option value="实训">实训</Option>

          </Select></div>
          {/* <div className="divs"><Button type="primary">安排考试</Button></div> */}
        </div>

        <div className="table">
          <Table studentData={props.administratorReducer.scbList2} columns={columns}></Table>
        </div>

        <div className="yema">
          <Pagination size="small" pageSize={page} current={pageIndex} total={props.administratorReducer.scbList.length} defaultPageSize={page} pageSizeOptions={['5', '10', '15', '20']} showSizeChanger showQuickJumper onChange={async (page, pageSize) => {
            setpageIndex(page)
            setpage(pageSize)
            // await props.getscblist({ page: pageSize, pageIndex: page })
            await props.getscblist({ page: pageSize, pageIndex: page, val1, val2, val3: scb, val4: stage })
          }} />
        </div>
      </div>
    </div>
  )
}
// export default Marketing
export default connect(state => state, action.administratorActions)(Educational);

